import type { ActionType } from '@ant-design/pro-components';
import { ProForm, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
import type { OpinionParams } from '@fill/client';
import { rspc } from '@fill/client';
import { Form, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { NODE_TYPE, QUESTION_ENUM } from '../../constants/default';
import { approvalTypes } from '../meeting/Detail';
import type { OpinionSchema } from '../opinion/interface';
import { Export } from '../record/Export';
import { Status } from '../report/Status';
import { useProgramme } from './Detail';

export default function Programme() {
  const actionRef = useRef<ActionType>();
  const {
    columns,
  } = useProgramme();

  const [params, setParams] = useState<{ arg: OpinionParams }>({
    arg: {
      content: null,
      state: null,
      book_state: null,
      slug: null,
      description: null,
      page: 1,
    },
  });

  const { data, isLoading } = rspc.useQuery(['opnions.get', params]);
  const [table, setTable] = useState<any>([]);

  useEffect(() => {
    setTable(
      params.arg.state ? data?.filter(item => item.programme_book?.state === params.arg.state) : data,
    );
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  const [form] = Form.useForm<any>();

  return (
    <ProTable<OpinionSchema>
      columns={columns}
      actionRef={actionRef}
      rowKey="uuid"
      search={false}
      options={false}
      loading={isLoading}
      dataSource={table}
      scroll={{ x: 1300 }}
      pagination={{
        pageSize: 20,
        onChange: page => console.log(page),
      }}
      dateFormatter="string"
      headerTitle={
        <>
          <Space direction="vertical">
            <Status module={NODE_TYPE.PROGRAMME} />
            <Export module="programme" text="导出提报" />
          </Space>
        </>
      }
      toolBarRender={() => [
        // eslint-disable-next-line react/jsx-key
        <ProForm<{
          slug: string
          description: string
          state: string
        }>
          layout="inline"
          form={form}
          submitter={{
            searchConfig: {
              submitText: '查询',
            },
            render(props, dom) {
              return dom.reverse();
            },
            onSubmit() {
              form.submit();
            },
            onReset() {
              form.resetFields();
              form.submit();
            },
          }}
          onFinish={async (params) => {
            console.log(params);
            setParams({
              arg: {
                slug: (!!params.slug && params.slug) || null,
                description: (!!params.description && params.description) || null,
                content: null,
                state: (!!params.state && params.state) || null,
                book_state: null,
                page: 1,
              },
            });
          }}
        >
          <ProFormSelect name="slug" placeholder="问题分类" width="sm" valueEnum={QUESTION_ENUM} />
          <ProFormText name="description" placeholder="问题方面" width="sm" />
          <ProFormSelect name="state" placeholder="审批状态" width="sm" valueEnum={approvalTypes} />
        </ProForm>,
      ]}
    />
  );
}
